<template>
  <div class="fullpage">
    <!-- prettier-ignore -->
    <div id="map">
      <aMap ref="map"></aMap>
    </div>
    <div>
      <van-button v-for="(tab, k) in tabs" :key="k" @click="switchTab(tab)">
        {{ tab.label }}
      </van-button>
    </div>
    {{ tabs }}
    {{ $route.params.id }}
    <!-- <bottonNav></bottonNav> -->
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'index',
  components: {
    // bottonNav: () => {
    //   return import('@/components/bottomNav.vue');
    // },
    aMap: () => {
      return import('@/components/map.vue');
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      tabs: [
        {
          checked: true,
          label: '散点地图',
          value: 0,
        },
        {
          checked: false,
          label: '区块地图',
          value: 1,
        },
      ],
    };
  },
  computed: {
    ...mapState(['MAP']),
  },
  watch: {},
  methods: {
    test: function() {},
    switchTab: function(tab) {
      // this.$refs['map'].switchPoint();
      this.tabs.forEach((item) => {
        item.checked = item == tab;
      });
      if (tab.value === 0) {
        this.$refs['map'].switchPoint();
      }
      if (tab.value === 1) {
        this.$refs['map'].switchPolygon();
      }
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url('./../assets/config.less');
@import url('./../assets/index.less');

.fullpage {
  max-width: 750px;
  height: 100vh;
  margin: 0 auto;
  background: rgba(255, 0, 0, 0.2);
}

#map {
  height: 80vh;
}
</style>
